import { request } from '@/api/request';
import { ImageCoverCard } from '@/components/ShowCard';
import { useAppSelector } from '@/redux/store';
import { Typography } from 'antd';
import { useEffect, useState } from 'react';
import { ClassListItem, mapCategory } from '../data';
import emptyUrl from './empty.png';
interface CategoryListPorps {
  trade?: string;
  //type 1课件包2试卷
  type: number;
  onChange?(value: { pName?: string; cName?: string; classId?: string }): void;
}
/**
 * 分类列表
 */
export function CategoryList({ onChange, trade, type }: CategoryListPorps) {
  const [cateGoryList, setCateGoryList] = useState<ClassListItem[]>();
  const { entId } = useAppSelector((state) => state.loginEnt);

  useEffect(() => {
    const params = {
      entId: entId,
      trade: trade,
      type: type,
    };
    request<{ list: ClassListItem[] }>({
      method: 'post',
      url: '/safe/api/entPlatform/classPackagePaperList',
      params,
    }).then((res) => {
      if (res.code == '200' && res.data) {
        res.data.list.map((v) => {
          mapCategory(v);
        });
        setCateGoryList(res.data.list);
      }
    });
  }, [trade, entId, type]);

  return (
    <>
      <ul style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
        {cateGoryList
          ?.filter((v) => Boolean(v.lowerListVo?.length))
          .map((item) => {
            return (
              <li key={item.guid}>
                <Typography.Title level={4}>{item.className}</Typography.Title>
                <ul style={{ display: 'flex', flexWrap: 'wrap', columnGap: 16 }}>
                  {item.lowerListVo.map((child) => {
                    return (
                      <li
                        style={{ marginBottom: '20px' }}
                        key={child.guid}
                        onClick={(e) => {
                          e.stopPropagation();
                          e.preventDefault();
                          onChange && onChange({ pName: item.className, cName: child.className, classId: child.guid });
                        }}
                      >
                        <ImageCoverCard
                          style={{ width: 240 }}
                          bodyStyle={{ padding: 16 }}
                          title={child.className}
                          description={`共有${child.num}个`}
                          coverSrc={child.picUrl || emptyUrl}
                          coverStyle={{ width: 240, height: 135, objectFit: 'cover', margin: 0 }}
                        />
                      </li>
                    );
                  })}
                </ul>
              </li>
            );
          })}
      </ul>
    </>
  );
}
